<p class="wt-lifespans-subtitle">
	<?= $subtitle ?>
</p>

<div class="wt-lifespans-scale">
	<?php for ($year = $start_year; $year < $end_year; $year += 10): ?><div class="wt-lifespans-decade"><?= $year ?></div><?php endfor ?>
</div>

<div class="wt-lifespans-individuals position-relative" style="height: <?= (5 + $max_rows) * 1.5 ?>rem; width: <?= ($end_year - $start_year) * 7 ?>px;">
	<?php foreach ($lifespans as $lifespan): ?>
	<a href="<?= e($lifespan->id) ?>" data-toggle="collapse" data-target="#<?= e($lifespan->id) ?>" aria-expanded="false" aria-controls="<?= e($lifespan->id) ?>">
		<div class="wt-lifespans-individual position-absolute text-nowrap text-truncate" dir="auto" style="background: <?= $lifespan->background ?>; <?= $dir === 'ltr' ? 'left' : 'right' ?>:<?= ($lifespan->birth_year - $start_year) * 7 ?>px; top:<?= $lifespan->row * 1.5 ?>rem; width:<?= ($lifespan->death_year - $lifespan->birth_year) * 7 + 5 ?>px;">
			<?= $lifespan->individual->getFullName() ?>
			<?= strip_tags($lifespan->individual->getLifespan()) ?>
		</div>
	</a>

	<div class="wt-lifespans-summary collapse position-absolute" id="<?= e($lifespan->id) ?>" style="<?= $dir === 'ltr' ? 'left' : 'right' ?>:<?= (min($lifespan->birth_year, $end_year - 50) - $start_year) * 7 ?>px; top:<?= ($lifespan->row + 1) * 1.5 ?>rem; width:350px;">
		<a class="wt-lifespans-summary-link" href="<?= e($lifespan->individual->url()) ?>">
			<?= $lifespan->individual->getFullName() ?>
		</a>

		<?php foreach ($lifespan->individual->getFacts(WT_EVENTS_BIRT . '|' . WT_EVENTS_DEAT, true) as $fact): ?>
			<?= $fact->summary() ?>
		<?php endforeach ?>
	</div>
	<?php endforeach ?>
</div>

